<template>
	<h2>用户管理</h2>
</template>

<script>
export default {}
</script>

<style>
</style><template>
	<div class="g-manager">
		<el-card shadow="always" :body-style="{ padding: '20px' }">
			<el-button
				type="warning"
				size="mini"
				icon="el-icon-user"
				@click="onAddManager"
				>添加操作员</el-button
			>
		</el-card>
		<el-table :data="managers" border stripe>
			<el-table-column label="头像">
				<template v-slot="scope">
					<!-- 可通过lazy开启懒加载功能，当图片滚动到可视范围内才会加载 -->
					<el-image
						:src="scope.row.headerimg | urlFilter"
						lazy
						style="width: 60px; height: 60px"
					>
						<div slot="error" class="image-slot">
							<i class="el-icon-picture-outline"></i>
						</div>
					</el-image>
				</template>
			</el-table-column>
			<el-table-column prop="username" label="用户名"> </el-table-column>
			<el-table-column prop="nick" label="昵称"> </el-table-column>
			<el-table-column label="角色">
				<template v-slot="scope">
					<span>{{ showRoleName(scope.row.role_id) }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<!-- scope.row 表示选中行数据对象 -->
				<template v-slot="scope">
					<el-button
						type="warning"
						size="small"
						@click="onDelete(scope.row.m_id)"
						>删除</el-button
					>
					<el-button
						type="success"
						size="small"
						@click="onEdit(scope.row)"
						>编辑</el-button
					>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog
			:title="isEdit ? '编辑操作员' : '添加操作员'"
			:visible.sync="isVisibleDialog"
			width="50%"
			@close="onClose"
			:close-on-click-modal="false"
		>
			<Add
				v-if="isVisibleDialog"
				:isEdit="isEdit"
				:editData="editData"
				@on-close="onClose"
			/>
		</el-dialog>
	</div>
</template>

<script>
import {
	RequestManagers,
	RequestRoles,
	RequestDeleteManagers
} from '@/api/system'
import Add from './add'
export default {
	components: {
		Add
	},
	data() {
		return {
			managers: [],
			roles: [],
			isVisibleDialog: false,
			isEdit: false,
			editData: {}
		}
	},
	created() {
		this.getManagers()
		this.getRoles()
	},
	methods: {
		async getManagers() {
			let data = await RequestManagers()
			let { resultCode, resultInfo } = data
			if (resultCode === 1) {
				this.managers = resultInfo
			}
		},
		async getRoles() {
			let data = await RequestRoles()
			let { resultCode, resultInfo } = data
			if (resultCode === 1) {
				this.roles = resultInfo.roles
			}
		},
		/**
		 * 显示角色名称
		 */
		showRoleName(roleId) {
			if (this.roles && this.roles.length == 0) return
			let role = this.roles.find(item => item.r_id == roleId)
			return role.rolename + ' - ' + role.description
		},
		/**
		 * 编辑
		 */
		onEdit(row) {
			this.isEdit = true
			this.isVisibleDialog = true
			this.editData = row
			console.log(this.editData)
		},
		/**
		 * 删除
		 */
		onDelete(id) {
			this.$confirm('确定要删除该记录吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(async () => {
				let data = await RequestDeleteManagers(id)
				if (data.resultCode == 1) {
					this.$message({
						type: 'success',
						message: '删除成功!'
					})
				}
				this.getManagers()
			})
		},
		/**
		 * 添加操作员
		 */
		onAddManager() {
			this.isEdit = false
			this.isVisibleDialog = true
		},
		/**
		 * 关闭
		 */
		onClose() {
			this.isEdit = false
			this.isVisibleDialog = false
			this.editData = {}
			this.getManagers()
		}
	}
}
</script>

<style>
</style>